<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    111
    <div id="app">
        <button v-on:click.ctrl="say('hi')">SayHi</button>
        <!-- <input type="button" v-on:key.up.alt.67="clear"> -->
        <button v-on:click.exact="onClick">onClick</button>

        <a v-on:click.one="doonce('do')">doonce</a>

        <button v-on:click.capture="capture('抓到cat了~~~~')">抓猫行动</button><br>

        <input v-model="message" placeholder="Say Something">

        <p>message is:{{message}}</p><br>

        <span>Multiple message is:</span>

        <p style="white-space: pre-line;">{{message1}}</p><br>

        <textarea v-model="message1" placeholder="add multiple lines"></textarea><br>

        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames }}</span>
        <br>
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
        <br>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>

    <script src="./vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: '国家信息中心网站',
                message1: '多行文本',
                checkedNames: [],
                picked: '',
                selected:''
            },
            methods: {
                say: function (message) {
                    alert(message);
                },
                onclick: function () {
                    alert("哔哔哔，即将触发事件")
                },
                doonce: function (message) {
                    alert(message);
                },
                capture: function (animal) {
                    alert(animal);
                }

            }
        })
    </script>
</body>

</html>